<template>
  <div class="app-container calendar-list-container">
    <BasicContainer>
      <ElTabs v-model="activeName" @tab-click="handleClick">
        <ElTabPane label="待办事项" name="first">
          <template #label>
            <span>待办事项<ElBadge :value="todoNum" :max="99" /> </span>
          </template>
          <Todo @setTodoNum="setTodoNum" />
        </ElTabPane>
        <ElTabPane label="已办事项" name="second">
          <Done />
        </ElTabPane>
        <ElTabPane label="已发任务" name="third">
          <MyDone />
        </ElTabPane>
        <!-- <el-tab-pane label="发起" name="fourth">
            <flowablelaunch />
          </el-tab-pane> -->
        <!--        <ElTabPane label="待签收任务" name="todoSignTask">
          <template #label>
            <span>待签收任务<ElBadge :value="todoSignTaskNum" :max="99"/> </span>
          </template>
          <TodoSignTask @setTodoSignTaskNum="setTodoSignTaskNum"/>
        </ElTabPane>-->
      </ElTabs>
    </BasicContainer>
  </div>
</template>

<script>
  import Todo from '@/module/admin/user/todo'
  import Done from '@/module/admin/user/done'
  import MyDone from '@/module/admin/user/mydone'

  export default {
    name: 'WorkItem',
    components: {
      Todo,
      Done,
      MyDone
    },
    data() {
      return {
        activeName: 'first',
        todoNum: 0,
        todoSignTaskNum: 0
      }
    },
    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name
      },
      setTodoNum(num) {
        this.todoNum = num
      },
      setTodoSignTaskNum(num) {
        this.todoSignTaskNum = num
      }
    }
  }
</script>
